<template>
  <div>
    <el-button @click="handleChange">切换</el-button>
    <video id="video" autoplay width="600" height="600"></video>
    <video id="video1" autoplay width="600" height="600"></video>
    <video id="video2" autoplay width="600" height="600"></video>
    <video id="video3" autoplay width="600" height="600"></video>
    <video id="video4" autoplay width="600" height="600"></video>
    <video id="video5" autoplay width="600" height="600"></video>
  </div>
</template>

<script>
  export default {
    name: 'index1',
    data() {
      return {
        webRtcServer: null
      }
    },
    mounted() {
      //video：需要绑定的video控件ID
      //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
      this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
      this.webRtcServer1 = new WebRtcStreamer('video1', location.protocol + '//127.0.0.1:8000')
      this.webRtcServer2 = new WebRtcStreamer('video2', location.protocol + '//127.0.0.1:8000')
      this.webRtcServer3 = new WebRtcStreamer('video3', location.protocol + '//127.0.0.1:8000')
      this.webRtcServer4 = new WebRtcStreamer('video4', location.protocol + '//127.0.0.1:8000')
      this.webRtcServer5 = new WebRtcStreamer('video5', location.protocol + '//127.0.0.1:8000')

      //需要查看的rtsp地址
      let rtspUrl = "rtsp://admin:a1234567@192.168.1.168:554/VP8/ch33/main/av_stream";
      console.log("rtsp地址：" + rtspUrl);
      let option = "rtptransport=tcp";
      this.webRtcServer.connect(rtspUrl, null, option, null);
      //rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
      //rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
    },
    beforeDestroy() {
      this.webRtcServer.disconnect()
      this.webRtcServer = null
    },
    methods: {
      handleChange() {
        this.webRtcServer.connect('rtsp://admin:a1234567@192.168.1.168:554/VP8/ch33/main/av_stream')
      }
    }
  }
</script>

<style scoped></style>